<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            display: inline-block;
            color: aliceblue;
            background-color: red;
            width: 80px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            font-family: Georgia, 'Times New Roman', Times, serif;
            margin-left: 10px;
        }
        #blue{
            background-color: rgb(81, 95, 249);
        }
    </style>
</head>
<body>
    <center>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span id="blue"></span>
    </center>

    <script>
        function getRandomIntInclusive(min, max) {
            const minCeiled = Math.ceil(min);
            const maxFloored = Math.floor(max);
            return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // 包含最小值和最大值
        }
        function compareFn(a, b) {
            if (a<b) {
                return -1;
            }
            if (a>b) {
                return 1;
            }
            // a 一定等于 b
            return 0;
        }
        //生成6个红码 1-33 有顺序 并不能重复
        //定义空的数组保存数据
        var arr = [];
        //定义变量来代表当前生成数字所在的下标
        var c=0,temp;
        //第一个号码可以随意生成
        arr[c] = getRandomIntInclusive(1,33);
        //生成第2-6个数据
        while( c < 7){
            //定义标记 来表示是否相同
            var flag = true;
            //生成随机数
            temp = getRandomIntInclusive(1,33);
            //拿着temp与arr数组里面的每一个元素进行比较，如果相同就不存入数组，不相同就存入数组
            for( var i=c;i>=0;i--){
                if( temp == arr[i]){
                    //不保存
                    flag = false;
                }
            }
            if(flag){
                arr[c] = temp;
                c++;
            }
        }
        //给数组排序
        arr.sort(compareFn);
        //将数组里面内容显示在span标签中
        var spans = document.querySelectorAll('span');//获取当前页面中所有的span标签
        for( var i=0;i<arr.length;i++){
            spans[i].innerHTML = arr[i];
        }
        //生成1个蓝码 1-16
        document.getElementById('blue').innerHTML = getRandomIntInclusive(1,16);
    </script>
</body>
</html>